<template>
  <div>
    <div class="top">
      <router-link to="/"><van-icon name="arrow-left" /></router-link>
      <h3>尖货捡漏</h3>
      <van-icon name="share-o" />
    </div>
    <ul id="content">
      <li v-for="(list, index) in res" :key="index" @click="tododetail(list)">
        <img :src="list.goodsImg" />
        <div>
          <p>{{ list.goodsName }}</p>
          <span>￥{{ list.goodsPrice }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon } from "vant";

Vue.use(Icon);
import axios from "axios";
export default {
  name: "dropcatching",
  data() {
    return {
      res: [],
    };
  },
  created() {
    axios({
      url: "/List",
      method: "get",
    }).then((res) => {
      this.res = res.data;
      // console.log(res.data);
    });
  },
  methods: {
    tododetail(list) {
      this.$router.push({
        path: "/detail",
        query: { obj: JSON.stringify(list) },
      });
    },
  },
};
</script>

<style scoped>
ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: .44rem;
  padding-bottom: 0.55rem;
}
ul > li {
  width: 48%;
  height: 2.25rem;
  margin-bottom: 0.125rem;
}
ul > li > img {
  width: 100%;
  height: 80%;
}
ul > li > div {
  width: 100%;
  height: 20%;
}
p {
  font-size: 0.07rem;
  margin-bottom: 0.15rem;
  color: #515151;
}
span {
  font-size: 0.15rem;
}
.top {
  width: 100%;
  height: 0.44rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 999;
}
</style>